<!DOCTYPE HTML>
	<head>
		<script type='text/javascript'>
			function myFunction() {
			var copyText = document.getElementById('macaddress');
			console.log(copyText);
			copyText.select();
			document.execCommand('copy');
			alert("Copied the text: " + copyText.value);
			} 
		</script>
		<style type='text/css'>

			body {
			  margin: auto;
			  background: #eaeaea;  
			  font-family: 'Open Sans', sans-serif;
			}

			.info p {
			  text-align:center;
			  color: #999;
			  text-transform:none;
			  font-weight:600;
			  font-size:15px;
			  margin-top:2px
			}

			.info i {
			  color:#F6AA93;
			}

			 h2 {
			 	width:100px;
			 	margin: 0px auto;
			}

			form h1 {
			  font-size: 18px;
			  background: #F6AA93 none repeat scroll 0% 0%;
			  color: rgb(255, 255, 255);
			  padding: 22px 25px;
			  border-radius: 5px 5px 0px 0px;
			  margin: auto;
			  text-shadow: none; 
			  text-align:left
			}

			form {
			  border-radius: 5px;
			  max-width:700px;
			  width:100%;
			  margin: 10px auto;
			  background-color: #FFFFFF;
			  overflow: hidden;
			}

			p span {
			  color: #000;
			}

			p {
			  margin: 0px;
			  font-weight: 500;
			  line-height: 2;
			  color:#333;
			}

			h1 {
			  text-align:center; 
			  color: #666;
			  text-shadow: 1px 1px 0px #FFF;
			  margin:50px 0px 0px 0px
			}

			input {
			  border-radius: 0px 5px 5px 0px;
			  border: 1px solid #eee;
			  margin-bottom: 15px;
			  width: 75%;
			  height: 40px;
			  padding: 0px 15px;
			}

			input#macaddress {
				width: 120px;
				height: 25px;
			}

			a {
			  text-decoration:inherit
			}

			legend {
				font-weight: bold;
			}

			.form-group {
			  overflow: hidden;
			  clear: both;
			}

			i {
			  color:#555;
			}

			.contentform {
			  padding: 40px 30px;
			}

			.button-contact{
			  background-color: #81BDA4;
			  color: #FFF;
			  text-align: center;
			  width: 100%;
			  border:0;
			  padding: 17px 25px;
			  border-radius: 0px 0px 5px 5px;
			  cursor: pointer;
			  margin-top: 40px;
			  font-size: 18px;
			}

			.leftcontact {
			  width:49.5%; 
			  float:left;
			  border-right: 1px dotted #CCC;
			  box-sizing: border-box;
			  padding: 0px 15px 0px 15px;
			}

			.rightcontact {
			  width:49.5%;
			  float:right;
			  box-sizing: border-box;
			  padding: 0px 0px 0px 15px;
			}

			#sendmessage {
			  border:1px solid #fff;
			  display:none;
			  text-align:center;
			  margin:10px 0;
			  font-weight:600;
			  margin-bottom:30px;
			  background-color: #EBF6E0;
			  color: #5F9025;
			  border: 1px solid #B3DC82;
			  padding: 13px 40px 13px 18px;
			  border-radius: 3px;
			  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03);
			}

			#sendmessage.show,.show  {
			  display:block;
			}

			.pure-form input {
			    padding:.5em .6em;
			    display:inline-block;
			    border:1px solid #ccc;
			    box-shadow:inset 0 1px 3px #ddd;
			    border-radius:4px;
			    vertical-align:middle;
			    box-sizing:border-box
			}

			.pure-form .pure-checkbox,.pure-form .pure-radio{
			    margin:.5em 0;
			    display:block
			}

			.pure-form label{
			    margin:.5em 0 .2em
			}
			.pure-form fieldset{
			    margin:0;
			    padding:.35em 0 .75em;
			    border:0
			}
			.pure-form legend{
			    display:block;
			    width:100%;
			    padding:.3em 0;
			    margin-bottom:.3em;
			    color:#333;
			    border-bottom:1px solid #e5e5e5
			}
			.pure-form .pure-group fieldset{
			    margin-bottom:10px
			}
			.pure-form .pure-group input{
			    display:block;
			    padding:10px;
			    margin:0 0 -1px;
			    border-radius:0;
			    position:relative;
			    top:-1px
			}
			.pure-form .pure-group button{
			    margin:.35em 0
			}

		</style>
	</head>
	<body>
		<h1>Web Configuration</h1>
		<div class='info'>
			<p>
				MAC Address <input id='macaddress' value='000000'><i class='fa fa-heart'></i><br/>
				Firmware Version 4.00a<br/>
				<button onclick='myFunction()'>Copy MAC Address to clipboard</button>
			</p>
		</div>
		<form method='get' action='submit' class='pure-form'>
			<h1>Please fill out the form to configure your wall-ink device</h1>
			<div class='leftcontact'>
				<fieldset class='form-group'>
					<legend>Wifi Connection</legend>
					<p>
						<label for='ssid0'>Wireless SSID0: </label><br/>
						<input id='ssid0' name='ssid0' value='welcome2sevenval' length=20>
					</p>
					<p>			
						<label for='password0'>Password0: </label><br/>
						<input id='password0' name='password0' value='hello@all' length=20>
					</p>			
				</fieldset>
				<fieldset class='form-group'>
					<legend>Backup Wifi Connection 1</legend>
					<p>			
						<label for='ssid1'>Wireless SSID1: </label><br/>
						<input id='ssid1' name='ssid1' value='railslove-guest' length=20>
					</p>			
					<p>			
						<label for=password1>Password1: </label><br/>
						<input id='password1' name='password1' value='loveisallaround' length=20>
					</p>			
				</fieldset>
			</div>	
			<div class='rightcontact'>	
				<fieldset class='form-group'>
					<legend>Wall Ink Server Settings</legend>
					<p>			
				    	<label for='baseurl'>Base URL: </label><br/>
				    	<input id='baseurl' name='baseurl' value='http://45.77.55.213/get_image.php' length=100>	    	
					</p>		    	
					<p>	    	
				    	<label for='imagekey'>Image Key: </label><br/>		    	
				    	<input id='imagekey' name='imagekey' value='railsislovebaby' length=100>
					</p>	    	
			    </fieldset>
			    <fieldset class='form-group'>
					<legend>Debug Mode</legend>
					<p>			
				    	<label for='on'>On</label><br/>  			    	
				        <input id="debug" name='debug' value='1' type='radio'>
					</p>	        
					<p>	        
				        <label for='off'>Off</label><br/>   			        
				        <input id="debug" name='debug' value='0' checked='true' type='radio'>
					</p>	        
			    </fieldset>
			</div>
			<button type='submit' class='button-contact'>Send</button>
		</form>
	</body>
</html>